<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf基本用法</title>
    <script type="text/javascript" src="/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#a1").click(function(){
                let id = $(this).attr("data-id");
                console.log("id:"+id);
            })
        });
    </script>
</head>
<body>
<h1>取request作用域的值</h1>
<!--
    取request作用域的值
    text:不识别标签,相当于jquery中的text()
        属性值可以引用JSP中的EL表达式语法
    utext:识别标签,相当于jquery中的html()
-->
<span th:text="${msg}"></span>
<span th:utext="${msg}"></span>
[[${msg}]]
[(${msg})]
<h1>取session作用域的值</h1>
<span th:text="${session.user.username}"></span>
<h1>取application作用域的值</h1>
<span th:text="${application.user.username}"></span>
<h1>属性赋值</h1>
<!--
    为元素的属性进行赋值时,如果其值是后台传递的变量
    此时为指定的属性名加上th前缀即可
    只有带有th前缀的属性才能访问后台传递的数据
    否则一切数据均作为普通字符串展现
    th前缀可以作为一切属性的前缀
 -->
<a id="a1" href="javascript:;" th:data-id="${id}">修改</a>

<h1>if判断</h1>
<span th:if="${age < 5}">婴儿</span>
<span th:if="${age < 18}">少年</span>
<span th:if="${age < 30}">青年</span>
<span th:if="${age < 50}">中年</span>
<span th:if="${age >= 50}">老年</span>

<!--
    unless标签:只有当判断表达式的值为false时
    才会执行标签体内容
-->
<h1>unless判断</h1>
<span th:unless="${age < 5}">婴儿</span>
<span th:unless="${age < 18}">少年</span>
<span th:unless="${age < 30}">青年</span>
<span th:unless="${age < 50}">中年</span>
<span th:unless="${age >= 50}">老年</span>

<h1>switch判断</h1>
<span th:switch="${role}">
    <!--<span th:case="student">学生</span>-->
    <span th:case="user">用户</span>
    <span th:case="staff">员工</span>
    <span th:case="businessman">商人</span>
    <span th:case="programmer">程序员</span>
    <span th:case="*">其他</span>
</span>

<h1>each遍历操作</h1>
<table id="b1" border="1">
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>用户名</th>
        <th>密码</th>
        <th>电话</th>
        <th>地址</th>
    </tr>
    <!--
        以JSTL语法作为参照物
        语法一:var,varStatus:items
        语法二:var:items
    -->
    <tr th:each="user,i:${users}">
        <td th:text="${i.index+1}"></td>
        <td>[[${user.id}]]</td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.phone}"></td>
        <td th:text="${user.address}"></td>
    </tr>
</table>
<h1>设置默认值</h1>
<form action="">
    编号:<input type="text" th:value="${user.id}"/><br/>
    用户名:<input type="text" th:value="${user.username}"/><br/>
    密码:<input type="password" th:value="${user.password}"/><br/>
    电话:<input type="text" th:value="${user.phone}"/><br/>
    地址:<input type="text" th:value="${user.address}"/><br/>
</form>
<h1>设置默认值</h1>
<form action="">
    编号:<input type="text" th:field="${user.id}"/><br/>
    用户名:<input type="text" th:field="${user.username}"/><br/>
    密码:<input type="password" th:field="${user.password}"/><br/>
    电话:<input type="text" th:field="${user.phone}"/><br/>
    地址:<input type="text" th:field="${user.address}"/><br/>
</form>
<h1>设置默认值</h1>
<form action="" th:object="${user}">
    编号:<input type="text" th:field="*{id}"/><br/>
    用户名:<input type="text" th:field="*{username}"/><br/>
    密码:<input type="password" th:field="*{password}"/><br/>
    电话:<input type="text" th:field="*{phone}"/><br/>
    地址:<input type="text" th:field="*{address}"/><br/>
</form>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>